<template>
  <div class="configInfo">
    <h3>
      {{$t('configLazyLoad.channel.enterpriseTip102')}}
    </h3>
    <div class="qrcode">
      <qrcode-image
        class="qrcode_image_test"
        ref="qrcodeTest"
        :optionSize="220"
        :logoShow='false'
        :allAccessUrl="qrcodeUrl"
      >
      </qrcode-image>
      <div class="qrcode_icon" v-if="isIcon">
        <div class="img">
          <img src="@/assets/img/QRsuccess.png" alt="">
          <p>授权成功</p>
        </div>
        
        </div>
    </div>
    
      <p>
      {{$t('configLazyLoad.channel.enterpriseTip116')}}
    </p>
    <div  class="btn">
       <el-button class="primary_btn" style="margin-right: 20px" @click="prevStep()">{{$t('public.prevStep')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="nextStep()">{{$t('public.nextStep')}}</el-button>
    </div>
  </div>
</template>
<script>
import QrcodeImage from '../webCustomerService/webOnlineServer/QrcodeImage.vue'
import bus from '@/store/eventBus'
  export default {
    name: 'weixinAuthStep1',
    data () {
      return {
        // wechatUrl: '',
        qrcodeUrl:"123",
        isIcon:false,
        // doc_id:"",
      }
    },
    components: { 
       QrcodeImage,
    },
    props:["formData"],
     mounted () {
      bus.$on('refreshWxworkAccessList', (data) => {
        this.isIcon=true
      })
    },
    beforeDestroy () {
      bus.$off('refreshWxworkAccessList')
    },
    methods: {
      nextStep() {
        if(this.formData){
          this.$emit('nextStep', "three")
        }else{
          this.$message.error(this.$t('configLazyLoad.channel.enterpriseTip115'))
        }     
      },
      prevStep () {
        bus.$emit('enterpriseCancel')
      },
  
    },

    beforeMount () { 
      this.$store.dispatch('getWxEnterpriseAuthUrl', {}).then(req => {
         this.qrcodeUrl = req.url
      })
    }

  }
</script>

<style scoped lang="stylus">
  .configInfo
    margin 30px auto
    width 540px
    h3
      text-align left
      margin-bottom 10px
      font-weight bold
  .qrcode
    padding 20px
    position relative 
    
  .qrcode_image_test
    display: flex;
    justify-content: center;
    position relative 
   
  .qrcode_icon
    display: flex;
    justify-content: center;
    align-items: center;
    width 100%
    height 100%
    position: absolute
    top 0
    .img
      margin-right 60px
      width 250px
      height 250px
      background: rgba(0,0,0,0.2)
      img
        width 80px
        height 80px
        margin-top: 50px;
      p  
        font-size: 20px
        color #000
    

  p
    text-align center
    font-size: 12px
    color: #666;
    margin: 20px 0 30px 0;


</style>
